<!-- 编辑周期卡 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label mb10">编辑周期卡</p>

        <n-form ref="formRef">
            <n-grid :cols="24" :x-gap="24">
                <n-form-item-gi :span="12" path="cardTemplateName" label="卡片名称" label-placement="left">
                    <n-input v-model:value="xxfrom.cardTemplateName" type="text" placeholder="请输入卡片名称" />
                </n-form-item-gi>
                <n-form-item-gi :span="6" path="settleType" label="结算方式" label-placement="left">

                    <n-select v-model:value="xxfrom.settleType" :options="jnxdfd" />
                </n-form-item-gi>
                <n-form-item-gi :span="6" path="outCardId" label="外部卡ID" label-placement="left">
                    <n-input v-model:value="xxfrom.outCardId" type="text" placeholder="请输入外部卡ID" />
                </n-form-item-gi>
                <n-form-item-gi :span="10" label="售卖起止时间" label-placement="left">

                    <n-date-picker v-model:value="xzcxzertt" update-value-on-close type="datetimerange"
                        :actions="['clear']" />
                </n-form-item-gi>

                <n-form-item-gi :span="14" label="" label-placement="left">


                </n-form-item-gi>

                <n-form-item-gi :span="5" label="分期期数" label-placement="left">
                    <n-select :options="qishuer" v-model:value="xxfrom.useInfo.usableCount" />
                </n-form-item-gi>
                <n-form-item-gi :span="5" label="原价" label-placement="left">
                    <n-input type="text" placeholder="请输入原价" v-model:value="kkjdsfdsb" />
                </n-form-item-gi>
                <n-form-item-gi :span="5" label="售卖价格" label-placement="left">
                    <n-input type="text" placeholder="请输入售卖价格" v-model:value="kkjdsfdsc" />
                </n-form-item-gi>

                <n-form-item-gi :span="9" label="周期类型" label-placement="left">
                    <div class="mt5 ml10">
                        <n-radio-group v-model:value="xxfrom.useInfo.cycleInfo.cycleType" name="radiogroup">
                            <n-space>
                                <n-radio v-for="song in kdcfdsfs" :key="song.value" :value="song.value">
                                    {{ song.label }}
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </div>
                </n-form-item-gi>
                <n-form-item-gi :span="6" label="首次扣款时间" label-placement="left">
                    <n-date-picker v-model:value="sckjsertt" type="date" :is-date-disabled="dateDisabled" />
                </n-form-item-gi>

                <!-- <n-form-item-gi :span="6" label="下单立即扣款" label-placement="left">
                    <div class="mt5">

                        <n-radio-group v-model:value="xxfrom.useInfo.cycleInfo.chargeNow" name="radiogroup">
                            <n-space>
                                <n-radio :key="false" :value="false">
                                    否
                                </n-radio>
                                <n-radio :key="true" :value="true">
                                    是
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </div>
                </n-form-item-gi> -->
                <n-form-item-gi :span="12" label="客服电话" label-placement="left">
                    <n-input type="text" placeholder="请输入客服电话" v-model:value="xxfrom.hotline" />
                </n-form-item-gi>
                <!-- <n-form-item-gi :span="6" label="是否全部门店" label-placement="left">
                    <div class="mt5">
                        <n-radio-group v-model:value="xxfrom.useInfo.showShop" name="radiogroup">
                            <n-space>
                                <n-radio key="0" value="0">
                                    部分门店
                                </n-radio>
                                <n-radio key="1" value="1">
                                    全部门店
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </div>
                </n-form-item-gi> -->
                <!-- <n-form-item-gi :span="6" label="可使用次数" label-placement="left">
                    <n-input type="text" placeholder="请输入可使用次数"  />
                </n-form-item-gi> -->
                <n-form-item-gi :span="18" label="可用门店" label-placement="left" v-if="xxfrom.useInfo.showShop == '0'">
                    <n-select v-model:value="xxfrom.useInfo.usableShopList" placeholder="可用门店" multiple
                        :options="mendianl" />
                </n-form-item-gi>


                <n-form-item-gi :span="24" label="使用说明" label-placement="left">
                    <n-input rows="5" type="textarea" placeholder="使用说明"
                        v-model:value="xxfrom.useInfo.useInstruction" />
                </n-form-item-gi>

                <n-form-item-gi :span="24" label="商品图片" label-placement="left">

                    <div class="kjjjmsertwe" style="grid-template-columns: repeat(6, 1fr)">
                        <div class="kjjjsertwwx" v-for="(item, idx) in jhhjer" :key="idx">
                            <img :src="item" />
                            <i class="iconfont dx-closefill sfdgdgty" @click="closesert(idx)"></i>
                            <div class="jjnxeertrtw vertical-center">
                                <p>
                                    <i class="iconfont dx-left cf fz32 b" @click="kjnmse(idx, 1)">
                                    </i>
                                    <i class="iconfont dx-right cf fz30 ml10" @click="kjnmse(idx, 2)">
                                    </i>
                                </p>
                            </div>
                        </div>

                        <div class="logo-context vertical-center ab pr" >
                            <span>点击上传图片</span>
                            <n-upload class="xzcdefrtetrt" accept=".jpg" name="file_content"
      @finish="handleFinisha"
      :headers="kjxcfdsfs"
    :action="apiUrl + 'meirong/axf/fileUpload'">
    <n-button class="zxcxzrtetert">上传文件</n-button>
</n-upload>
                        </div>
                    </div>
                    <!-- <div class="z9 fz12">
                        上传750px*750px的jpg图片，最多上传6张 
                    </div> -->
                </n-form-item-gi>


            </n-grid>
        </n-form>





        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>商品图片</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" :types="'商品图片' + Userid"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <div class="zxcxzrtertertret vertical-center">
            <div>
              
                <n-button type="info"  @click="bapocunsdft" :loading="cxzcxvrtry" v-if="xxfrom.cardTemplateStatus=='PUBLISHED'"> 保存 </n-button>
                <n-button type="error" quaternary v-if="xxfrom.cardTemplateStatus&&xxfrom.cardTemplateStatus!='PUBLISHED'" >
                    {{ kjdfdsf() }}    
                </n-button>

                
                <n-button type="error" class="ml20" @click="callBack"> 返回上一页 </n-button>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
import { dxget, hf, qurl, callBack, dxpost, transferTimeYMDHm } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import { apiUrl } from "../../util/config";
const cz = qurl()
const xzcxzertt = ref(null)
const qishuer = ref([])
const mendianl = ref([])
const cxzcxvrtry= ref(false)
const Userid = ref(localStorage.id);
const photoShowModaler = ref(false)
if(!localStorage.app_auth_token){
  hf('shangjiagl')
}

const kjxcfdsfs = {
    app_auth_token:localStorage.app_auth_token,
    ip_role_id:localStorage.ip_role_id
}
const jhhjer = ref([])
for (let i = 1; i <= 24; i++) {
    qishuer.value.push({
        label: i + "期",
        value: i
    })
}
const kdcfdsfs = [
    { label: "周", value: "WEEK" },
    { label: "月", value: "MONTH" },
    { label: "日", value: "DAY" },
    { label: "季", value: "QUARTER" },
]
const zhjhsd = [
    { label: '已发布', value: 'PUBLISHED' },
    { label: '审核中', value: 'REVIEWING' },
    { label: '审核失败', value: 'REJECTED' },
    { label: '已下架', value: 'DELISTING' },
    { label: '已冻结', value: 'FREEZING' },
    { label: '已过期', value: 'EXPIRED' },

]
const jnxdfd = [
    { label: '统一收款', value: '1' },
    { label: '分店结算', value: '2' },
]
const kkjdsfdsa = ref() //期数
const kkjdsfdsb = ref()// 原价
const kkjdsfdsc = ref()//当前价格
const kkjdsfdsd = ref()
const sckjsertt = ref() // 首次扣款日期
const likouisdr = ref(false) //立即扣款
const keyinmxrr = ref([])//可用门店
const xxfrom = ref({
    cardTemplateName: "",
    settleType: "",
    outCardId: "",
    cardTemplateStatus:"",
    useInfo: {
        usableCount: "",//期数
        usableShopList: "",//店铺列表
        useInstruction: "",//使用说明
        showShop: "",//是否全部门店 0 部门  1全部
        cycleInfo: {
            cycleType: "",//周期类型
            cyclevalue: 0,
            chargeNow: ""
        }
    }
})

let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    jhhjer.value.push(jjnmnxeer);
    photoShowModaler.value = false;
};
const dateDisabled = (ts) => {
    const date = new Date(ts).getTime() + (1000 * 60 * 60 * 24);
    const dqwe = new Date().getTime();
    const dqwc = new Date().getTime() + (1000 * 60 * 60 * 24 * 30);
    if (dqwc < date) {
        return true
    }
    return (dqwe > date ? true : false);
}
const initsd = async () => {
    const { data } = await dxget("meirong/wantu/spxq", { id: cz.cardTemplateId })
    console.log(data.cardTemplate);
    xxfrom.value = data.cardTemplate
    const jxcdfs = new Date(xxfrom.value.saleInfo.salableStartTime).getTime()
    const jxcdfsb = new Date(xxfrom.value.saleInfo.salableEndTime).getTime()
    xzcxzertt.value = [jxcdfs, jxcdfsb]
    keyinmxrr.value = xxfrom.value.useInfo.usableShopList

    kkjdsfdsa.value = xxfrom.value.useInfo.periodPriceList.length
    let jdfdsfa = 0
    let jdfdsfb = 0
    xxfrom.value.useInfo.periodPriceList.map(a => {
        jdfdsfa += a.originalPrice
    })
    xxfrom.value.useInfo.periodPriceList.map(a => {
        jdfdsfb += a.salePrice
    })
    kkjdsfdsa.value = xxfrom.value.useInfo.periodPriceList.length
    kkjdsfdsb.value = jdfdsfa / 100
    kkjdsfdsc.value = jdfdsfb / 100
    // kkjdsfdsd.value = xxfrom.value.useInfo.cycleInfo.cycleType
    sckjsertt.value = new Date().getTime() + (60 * 1000 * 60 * 24 * xxfrom.value.useInfo.cycleInfo.cycleValue)
    // likouisdr.value = xxfrom.value.useInfo.cycleInfo.chargeNow
    jhhjer.value = xxfrom.value.imageUrlList

}
initsd()


const mendianList = async () => {
    const { data } = await dxget("meirong/wantu/mendianList")

    console.log(data);
    mendianl.value = data
}
mendianList()
const tijiaosd = async () => {
    if (kkjdsfdsc.value > kkjdsfdsb.value) {
        window.$message.error('售卖价不能大于原价')
        return
    }
}

const closesert = (idx) => {
    jhhjer.value.splice(idx, 1);
};
const kjnmse = (idx, type) => {
    if (type == 1 && idx > 0) {
        [jhhjer.value[idx - 1], jhhjer.value[idx]] = [
            jhhjer.value[idx],
            jhhjer.value[idx - 1],
        ];
    }
    console.log(jhhjer.value.length < idx);
    if (type == 2 && jhhjer.value.length - 1 > idx) {
        [jhhjer.value[idx + 1], jhhjer.value[idx]] = [
            jhhjer.value[idx],
            jhhjer.value[idx + 1],
        ];
    }
};

const handleFinisha = (a) => {
    const { data } = JSON.parse(a.event.currentTarget.responseText);
    jhhjer.value.push('https://mdn.alipayobjects.com/mrch_material/afts/img/'+data.data.file_id);

}

// 保存
const bapocunsdft = async () => {
    xxfrom.value.saleInfo.salableStartTime = transferTimeYMDHm(xzcxzertt.value[0])
    xxfrom.value.saleInfo.salableEndTime = transferTimeYMDHm(xzcxzertt.value[1])
    let jjdfdds = []
    for (let i = 0; i < xxfrom.value.useInfo.usableCount; i++) {
        jjdfdds.push({
            period: i + 1,
            original_price: parseInt((kkjdsfdsb.value * 100) / xxfrom.value.useInfo.usableCount),
            sale_price: parseInt((kkjdsfdsc.value * 100) / xxfrom.value.useInfo.usableCount)
        })
        console.log('666');
    }
    xxfrom.value.useInfo.periodPriceList = jjdfdds
    xxfrom.value.useInfo.cycleInfo.cycleValue = ''+daysUntil(sckjsertt.value)


    cxzcxvrtry.value= true
    const { data } = await dxpost("meirong/wantu/xiugaispsde", xxfrom.value)
    cxzcxvrtry.value = false
    console.log(data);
    if (data.code != 10000) {
                window.$message.error(data.subMsg)
                return
            }
            window.$message.success('操作成功')
            callBack()
}


const daysUntil = (futureDateString) => {
    const futureDate = new Date(futureDateString);
    const currentDate = new Date();
    const diffTime = Math.abs(futureDate - currentDate);
    return parseInt(diffTime / (1000 * 60 * 60 * 24)) + 1;
}
const kjdfdsf =()=>{
   return zhjhsd.filter(a=>a.value==xxfrom.value.cardTemplateStatus)[0].label
}
</script>
<style scoped></style>